<template>
	<view class="mine">
		<view class="topbg">
			<view class="userLogo">
				<image :src="userLogo" mode="scaleToFill"></image>
				<view @tap="goLogin" class="userName">
					{{userName}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="orderBox">
				<view class="top">
					<text>我的订单</text>
					<view class="readAll" @tap="goOrder(0)">
						查看全部<image src="../../static/images/quanbu.png" mode="scaleToFill"></image>
					</view>
				</view>
					<view class="uni-list statusList">
						<view class="uni-list-cell"  @tap="goOrder(1)">
							<image src="../../static/images/fukuan.png" mode="scaleToFill"></image>
							<view >
								待付款
							</view>
							<view class="corner" v-if="badges.notPaymentNumber">{{badges.notPaymentNumber}}</view>
						</view>
						<view class="uni-list-cell"  @tap="goOrder(2)">
							<image src="../../static/images/fahuo.png" mode="scaleToFill"></image>
							<view >
								待发货
							</view>
							<view class="corner"  v-if="badges.notShipmentsNumber">{{badges.notShipmentsNumber}}</view>
						</view>
						<view class="uni-list-cell"  @tap="goOrder(3)">
							<image src="../../static/images/shouhuo.png" mode="scaleToFill"></image>
							<view >
								待收货
							</view>
							<view class="corner" v-if="badges.notReceiveGoods">{{badges.notReceiveGoods}}</view>
						</view>
						<view class="uni-list-cell"  @tap="goOrder(4)">
							<image src="../../static/images/pingjia.png" mode="scaleToFill"></image>
							<view >
								待评价
							</view>
							<view class="corner" v-if="badges.noeValuatetNumber">{{badges.noeValuatetNumber}}</view>
						</view>
						<view class="uni-list-cell"  @tap="goOrder(5)">
							<image src="../../static/images/tuikuan.png" mode="scaleToFill"></image>
							<view >
								退款/售后
							</view>
							<!-- <view class="corner" style="right: 20upx;" v-if="badges.notRefundNumber">{{badges.notRefundNumber}}</view> -->
						</view>
					</view>
			</view>
				<view class="uni-list mineLists">
					<view class="uni-list-cell">
						<navigator :url="isLogin?'../collect/collect':'../login/login'" class="mineList">
							<text>我的收藏</text>
							<image src="../../static/images/quanbu.png" mode="scaleToFill"></image>
						</navigator>
					</view>
					<view class="uni-list-cell">
						<navigator :url="isLogin?'../purse/purse':'../login/login'" class="mineList">
							<text>我的钱包</text>
							<image src="../../static/images/quanbu.png" mode="scaleToFill"></image>
						</navigator>
					</view>
					<view class="uni-list-cell">
						<navigator url="../message/message" class="mineList">
							<text>我的消息</text>
							<image src="../../static/images/quanbu.png" mode="scaleToFill"></image>
						</navigator>
					</view>
				<!-- 	<view class="uni-list-cell">
						<navigator url="#" class="mineList">
							<text>联系客服</text>
							<image src="../../static/images/quanbu.png" mode="scaleToFill"></image>
						</navigator>
							
					</view> -->
					<view class="uni-list-cell">
						<navigator :url="isLogin?'/pages/setting/setting':'../login/login'" class="mineList">
							<text>设置</text>
							<image src="../../static/images/quanbu.png" mode="scaleToFill"></image>
						</navigator>
							
					</view>
				</view>
			
		</view>
		
	</view>
</template>

<script>
	export default{
		data() {
			return {
				userLogo: '../../static/images/user.png',
				userName:"点击登录/注册",
				isLogin:true,
				badges:{}
			}
		},
		onLoad() {},
		onShow() {
			if(uni.getStorageSync('userId')){
				this.userName = uni.getStorageSync('nickName')
				this.userLogo = uni.getStorageSync('userLogo')
				this.getuserInfo()
				this.isLogin = true
				this.getCorners()
			}else{
				this.userName  = "点击登录/注册"
				this.badges = {}
				this.userLogo = '../../static/images/user.png'
			}
		},
		methods:{
			getCorners(){
				let data = {}
				this.$http.post('/api/v1.0/app/statistics/getTransactionCenter',data,res=>{
					this.badges = res.data.data
				})
			},
			goLogin(){
				if(this.userName == '点击登录/注册'){
					uni.navigateTo({
						url:'../login/login'
					})
				}
				
			},
			goOrder(type){
				if(this.isLogin == false){
					uni.navigateTo({
						url:'../login/login'
					})
					return;
				}
				uni.navigateTo({
					url:'/pages/myorder/myorder?type=' + type
				})
			},
			getuserInfo(){
				let data = {}
				this.$http.post('/api/v1.0/user/queryPersonInform',data,res=>{
				
					this.userName = res.data.data.nickName
					this.userLogo = res.data.data.logo
					uni.setStorage({
						key:"nickName",
						data:res.data.data.nickName
					})
					uni.setStorage({
						key:"userLogo",
						data:res.data.data.logo
					})
				},()=>{})
			}
		}
	}
</script>

<style lang="scss">
	.mine{
		background-color: #f4f4f4;
		height: 100vh;
		overflow: hidden;
		.topbg{
			background: linear-gradient(to bottom, #FC3F0C 0%,#E8271B 100%);
			width: 100%;
			height: 415upx;
			position: relative;
			.userLogo{
				position: absolute;
				bottom: 135upx;
				left: 27upx;
				width: 100%;
				display: flex;
				align-items: center;
				// justify-content: flex-start;
				image{
					width: 100upx;
					height: 100upx;
					border-radius: 50%;
					margin-right: 20upx;
				}
				.userName{
					font-size: 40upx;
					font-weight: bold;
					color: #fff;
				}
			}
		}
		.content{
			width: 694upx;
			margin: 0 auto;
			position: relative;
			box-sizing: border-box;
			top: -95upx;
			.orderBox{
				background-color: #fff;
				border-radius: 20upx;
				.top{
					height: 66upx;
					border-bottom: 1upx solid #f2f2f2;
					padding: 0 22upx 0 29upx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						font-size: 28upx;
						color: #333;
					}
					.readAll{
						display: flex;
						align-items: center;
						color: #999;
						font-size: 24upx;
						image{
							width: 22upx;
							height: 22upx;
						}
					}
				}
				.statusList{
					padding: 28upx 0 35upx;
					margin: 0 23upx 0 42upx;
					display: flex;
					justify-content: space-between;
					
					.uni-list-cell{
						padding: 0 9upx;
						text-align: center;
						position: relative;
						.corner{
							position: absolute;
							top: -5upx;
							right: 0;
							border: 1upx solid #FF8754;
							color: #FF8754;
							font-size: 20upx;
							height: 28upx;
							padding: 0 8upx;
							border-radius: 15upx;
							background-color: #fff;
						}
						image{
							width: 54upx;
							height: 54upx;
						}
						view{
							font-size: 24upx;
							color: #4d4d4d;
						}
					}
				}	
			}
			.mineLists{
				background-color: #fff;
				margin-top: 20upx;
				border-radius: 20upx;
				box-sizing: border-box;
				padding: 0 40upx;
				
				.uni-list-cell{
					border-bottom: 1upx solid #f2f2f2;
					height: 88upx;
					display: flex;
					align-items: center;
					.mineList{
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #fff;
						text{
							font-size: 28upx;
							color: #333;
						}
						image{
							width: 22upx;
							height: 22upx;
						}
				}
				}
				
			}
		}
	}
</style>
